<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html class="x-border-box x-strict">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/datagrid.js"></script>
<style type="text/css">
/* style rows on mouseover */
.x-grid-row-over .x-grid-cell-inner {
	font-weight: bold;
}
/* shared styles for the ActionColumn icons */
.x-action-col-cell img {
	height: 16px;
	width: 16px;
	cursor: pointer;
}
/* custom icon for the "buy" ActionColumn icon */
.x-action-col-cell img.buy-col {
	background-image: url(../shared/icons/fam/accept.png);
}
/* custom icon for the "alert" ActionColumn icon */
.x-action-col-cell img.alert-col {
	background-image: url(../shared/icons/fam/error.png);
}

.x-ie6 .x-action-col-cell img.buy-col {
	background-image: url(../shared/icons/fam/accept.gif);
}

.x-ie6.x-action-col-cell img.alert-col {
	background-image: url(../shared/icons/fam/error.gif);
}

.x-ie6 .x-action-col-cell img {
	position: relative;
	top: -1px;
}

/*!
 * Ext JS
 * Copyright(c) 2006-2012 Sencha Inc.
 * licensing@sencha.com
 * http://www.sencha.com/license
 */
body {
    padding:20px;
    padding-top:32px;
}
.x-body {
    font-family:helvetica,tahoma,verdana,sans-serif;
    font-size:13px;
}
p {
    margin-bottom:15px;
}
h1 {
    font-size:18px;
    margin-bottom:20px;
}
h2 {
    font-size:14px;
    color:#333;
    font-weight:bold;
    margin:10px 0;
}
.example-info{
    width:150px;
    border:1px solid #c3daf9;
    border-top:1px solid #DCEAFB;
    border-left:1px solid #DCEAFB;
    background:#ecf5fe url( info-bg.gif ) repeat-x;
    font-size:10px;
    padding:8px;
}
pre.code{
    background: #F8F8F8;
    border: 1px solid #e8e8e8;
    padding:10px;
    margin:10px;
    margin-left:0px;
    border-left:5px solid #e8e8e8;
    font-size: 12px !important;
    line-height:14px !important;
}
.msg .x-box-mc {
    font-size:14px;
}
#msg-div {
    position:absolute;
    left:35%;
    top:10px;
    width:300px;
    z-index:20000;
}
#msg-div .msg {
    border-radius: 8px;
    -moz-border-radius: 8px;
    background: #F6F6F6;
    border: 2px solid #ccc;
    margin-top: 2px;
    padding: 10px 15px;
    color: #555;
}
#msg-div .msg h3 {
    margin: 0 0 8px;
    font-weight: bold;
    font-size: 15px;
}
#msg-div .msg p {
    margin: 0;
}
.x-grid3-row-body p {
    margin:5px 5px 10px 5px !important;
}

.feature-list {
    margin-bottom: 15px;
}
.feature-list li {
    list-style: disc;
    margin-left: 17px;
    margin-bottom: 4px;
}


</style>
<script type="text/javascript"> 
	//排序要实现的方法
	function mydatagridSortRequest(column,rule){
		alert(column+" sort rule is "+rule);
	}	
	//分页中第一页要实现的方法
	function mydatagridFirstRequest(pageNo){
		alert("The request page is "+pageNo);
	}
	//分页中下一页要实现的方法
	function mydatagridNextRequest(pageNo){
		alert("The request page is "+pageNo);
	}
	//分页中前一页要实现的方法
	function mydatagridPrevRequest(pageNo){
		alert("The request page is "+pageNo);
	}
	//最后一页要实现的方法
	function mydatagridLastRequest(pageNo){
		alert("The request page is "+pageNo);
	}
	
	$(function(){ 	
		var dataGrid=new MyDataGrid("mydatagrid");
		dataGrid.setPager({totalPage:10,curPage:1,rowsOfpage:10});
		dataGrid.setSort({sortColumn:'company',sortRule:'desc'});
		dataGrid.init();			
	});
		
	
	
	
</script>
</head>
<body class="x-body x-gecko x-reset">
		<div id="mydatagrid" style="width: 600px; height: 360px;"
			class="x-panel x-grid-with-row-lines x-panel-default x-grid x-nlg">
			
			<!-- DataGrid Head开始 -->
			<div id="gridpanel-1009_header"
				class="x-panel-header x-docked x-panel-header-default x-horizontal x-panel-header-horizontal x-panel-header-default-horizontal x-top x-panel-header-top x-panel-header-default-top x-docked-top x-panel-header-docked-top x-panel-header-default-docked-top x-unselectable x-panel-header-default-top"
				style="-moz-user-select: -moz-none; left: 0px; top: 0px; width: 600px;">
				
				<div
					class="x-panel-header-body x-panel-header-body-default x-panel-header-body-horizontal x-panel-header-body-default-horizontal x-panel-header-body-top x-panel-header-body-default-top x-panel-header-body-docked-top x-panel-header-body-default-docked-top x-panel-header-body-default-horizontal x-panel-header-body-default-top x-panel-header-body-default-docked-top x-box-layout-ct"
					id="gridpanel-1009_header-body" style="width: 588px;">
					
					<div role="presentation" class="x-box-inner "
						id="gridpanel-1009_header-innerCt"
						style="width: 588px; height: 17px;">
						
						<div	style="position: absolute; width: 20000px; left: 0px; top: 0px; height: 1px"
							id="gridpanel-1009_header-targetEl">							
							<!-- DataGrid 的标题 -->
							<div id="gridpanel-1009_header_hd"
								style="text-align: left; left: 0px; top: 0px; margin: 0px; width: 571px;"
								class="x-component x-panel-header-text-container x-box-item x-component-default">
								<span class="x-panel-header-text x-panel-header-text-default"
									id="gridpanel-1009_header_hd-textEl">Array Grid</span>
							</div>
							<!-- 隐藏DataGrid 的图片 -->
							<div id="tool-1018"
								style="width: 15px; height: 15px; left: 573px; top: 1px; margin: 0px;"
								class="x-tool x-box-item x-tool-default">
								<img role="presentation" class="x-tool-collapse-top"
									src=""
									id="tool-1018-toolEl">
							</div>							
						</div>
						
					</div>
					
				</div>
			</div>
			<!-- DataGrid Head结束 -->
			
			<!--DataGrid Title 开始  -->
			<div id="headercontainer-1010"
				style="border-width: 1px; left: 0px; top: 25px; width: 600px;"
				class="x-grid-header-ct x-docked x-grid-header-ct-default x-docked-top x-grid-header-ct-docked-top x-grid-header-ct-default-docked-top x-box-layout-ct">
				
				<div role="presentation" class="x-box-inner "
					id="headercontainer-1010-innerCt"
					style="width: 583px; height: 22px;">
					
					<!--DataGrid Title Container 开始  -->
					<div
						style="position: absolute; width: 20000px; left: 0px; top: 0px; height: 1px"
						id="headercontainer-1010-targetEl">
						
						<!-- DataGrid Company Title 开始 -->
						<div id="gridcolumn-1011"
							style="border-width: 1px; width: 206px; height: auto; left: 0px; top: 0px; margin: 0px;"
							class="x-unselectable x-column-header-align-left x-box-item x-column-header x-unselectable-default 
								x-column-header-sort-undefined x-column-header-sort-null x-column-header-first">							
							<div class="x-column-header-inner  sorting" id="Company"
								style="height: auto; padding-top: 3px; cursor: pointer;">
								<span class="x-column-header-text">Company</span>
								<div class="x-column-header-trigger"
									id="gridcolumn-1011-triggerEl"></div>
							</div>							
							<div role="presentation" class="x-clear"
								id="gridcolumn-1011-clearEl"></div>
						</div>						
						<!-- DataGrid Company Title 结束 -->
						
						<div id="gridcolumn-1014"
							style="border-width: 1px; width: 75px; height: auto; left: 206px; top: 0px; margin: 0px;"
							class="x-unselectable x-column-header-align-left x-box-item x-column-header x-unselectable-default x-column-header-sort-undefined x-column-header-sort-null">
							<div class="x-column-header-inner  sorting" id="Change"
								style="height: auto; padding-top: 3px;cursor: pointer;">
								<span class="x-column-header-text">%
									Change</span>
								<div class="x-column-header-trigger"
									id="gridcolumn-1014-triggerEl"></div>
							</div>
							<div role="presentation" class="x-clear"
								id="gridcolumn-1014-clearEl"></div>
						</div>
						
						<div id="gridcolumn-1012"
							style="border-width: 1px; width: 75px; height: auto; left: 281px; top: 0px; margin: 0px;"
							class="x-unselectable x-column-header-align-left x-box-item x-column-header x-unselectable-default x-column-header-sort-undefined x-column-header-sort-null">
							<div class="x-column-header-inner  sorting" id="Price"
								style="height: auto; padding-top: 3px;cursor: pointer;">
								<span class="x-column-header-text">Price</span>
								<div class="x-column-header-trigger"
									id="gridcolumn-1012-triggerEl"></div>
							</div>
							<div role="presentation" class="x-clear"
								id="gridcolumn-1012-clearEl"></div>
						</div>
						
						<div id="gridcolumn-1013"
							style="border-width: 1px; width: 75px; height: auto; left: 356px; top: 0px; margin: 0px;"
							class="x-unselectable x-column-header-align-left x-box-item x-column-header x-unselectable-default x-column-header-sort-undefined x-column-header-sort-null">
							<div class="x-column-header-inner  sorting" id="Unit"
								style="height: auto; padding-top: 3px;cursor: pointer;">
								<span class="x-column-header-text" >Unit</span>
								<div class="x-column-header-trigger"
									id="gridcolumn-1013-triggerEl"></div>
							</div>
							<div role="presentation" class="x-clear"
								id="gridcolumn-1013-clearEl"></div>
						</div>
						
						<div id="gridcolumn-1015"
							style="border-width: 1px; width: 85px; height: auto; left: 431px; top: 0px; margin: 0px;"
							class="x-unselectable x-column-header-align-left x-box-item x-column-header x-unselectable-default x-column-header-sort-undefined ">
							<div class="x-column-header-inner" id="Updated"
								style="height: auto; padding-top: 3px;">
								<span class="x-column-header-text" >Last
									Updated</span>
								<div class="x-column-header-trigger"
									id="gridcolumn-1015-triggerEl"></div>
							</div>
							<div role="presentation" class="x-clear"
								id="gridcolumn-1015-clearEl"></div>
						</div>
						
						<div id="actioncolumn-1016"
							style="border-width: 1px; width: 50px; height: auto; left: 516px; top: 0px; margin: 0px;"
							class="x-unselectable x-column-header-align-left x-box-item x-column-header x-unselectable-default x-column-header-last">
							<div class="x-column-header-inner" id="actioncolumn-1016-titleEl"
								style="height: auto; padding-top: 3px;">
								<span class="x-column-header-text" id="actioncolumn-1016-textEl">&nbsp;</span>
							</div>
							<div role="presentation" class="x-clear"
								id="actioncolumn-1016-clearEl"></div>
						</div>
						
					</div>
					<!--DataGrid Title Container 结束  -->
				</div>
			</div>
			<!--DataGrid Title 结束  -->
			
			<div
				class="x-panel-body x-grid-body x-panel-body-default x-panel-body-default x-layout-fit"
				id="gridpanel-1009-body"
				style="width: 600px; height: 282px; left: 0px; top: 48px;">
				
				<div id="gridview-1017"
					class="x-grid-view x-fit-item x-grid-view-default"
					style="overflow: auto; margin: 0px; width: 598px; height: 300px;"
					tabindex="-1">
					
					<!-- 数据表格开始 -->
					<table cellspacing="0" cellpadding="0" border="0"
						style="width: 566px;" class="x-grid-table x-grid-table-resizer">
						<tbody>
							<tr class="x-grid-header-row">
								<th style="width: 206px; height: 0px;"
									class="x-grid-col-resizer-gridcolumn-1011" id="ext-gen1055"></th>
								<th style="width: 75px; height: 0px;"
									class="x-grid-col-resizer-gridcolumn-1014"></th>
								<th style="width: 75px; height: 0px;"
									class="x-grid-col-resizer-gridcolumn-1012"></th>
								<th style="width: 75px; height: 0px;"
									class="x-grid-col-resizer-gridcolumn-1013"></th>
								<th style="width: 85px; height: 0px;"
									class="x-grid-col-resizer-gridcolumn-1015"></th>
								<th style="width: 50px; height: 0px;"
									class="x-grid-col-resizer-actioncolumn-1016"></th>
							</tr>		
												
							<tr class="x-grid-row ">
								<td
									class=" x-grid-cell x-grid-cell-gridcolumn-1011   x-grid-cell-first"><div
										style="text-align: left;" class="x-grid-cell-inner ">3m
										Co</div>
								</td>
								<td class=" x-grid-cell x-grid-cell-gridcolumn-1014   "><div
										style="text-align: left;" class="x-grid-cell-inner ">
										<span style="color: green;">0.03%</span>
									</div>
								</td>
								<td class=" x-grid-cell x-grid-cell-gridcolumn-1012   "><div
										style="text-align: left;" class="x-grid-cell-inner ">$71.72</div>
								</td>
								<td class=" x-grid-cell x-grid-cell-gridcolumn-1013   "><div
										style="text-align: left;" class="x-grid-cell-inner ">
										<span style="color: green;">0.02</span>
									</div>
								</td>
								<td class=" x-grid-cell x-grid-cell-gridcolumn-1015   "><div
										style="text-align: left;" class="x-grid-cell-inner ">09/01/2012</div>
								</td>
								<td
									class=" x-grid-cell x-grid-cell-actioncolumn-1016   x-action-col-cell x-grid-cell-last"><div
										style="text-align: left;" class="x-grid-cell-inner ">
										<img data-qtip="Sell stock"
											class="x-action-col-icon x-action-col-0   "
											src="../shared/icons/fam/delete.gif" alt=""><img
											data-qtip="Buy stock"
											class="x-action-col-icon x-action-col-1   buy-col"
											src=""
											alt="">
									</div>
								</td>
							</tr>
							<tr class="x-grid-row  x-grid-row-alt">
								<td
									class=" x-grid-cell x-grid-cell-gridcolumn-1011   x-grid-cell-first"><div
										style="text-align: left;" class="x-grid-cell-inner ">Alcoa
										Inc</div>
								</td>
								<td class=" x-grid-cell x-grid-cell-gridcolumn-1014   "><div
										style="text-align: left;" class="x-grid-cell-inner ">
										<span style="color: green;">1.47%</span>
									</div>
								</td>
								<td class=" x-grid-cell x-grid-cell-gridcolumn-1012   "><div
										style="text-align: left;" class="x-grid-cell-inner ">$29.01</div>
								</td>
								<td class=" x-grid-cell x-grid-cell-gridcolumn-1013   "><div
										style="text-align: left;" class="x-grid-cell-inner ">
										<span style="color: green;">0.42</span>
									</div>
								</td>
								<td class=" x-grid-cell x-grid-cell-gridcolumn-1015   "><div
										style="text-align: left;" class="x-grid-cell-inner ">09/01/2012</div>
								</td>
								<td
									class=" x-grid-cell x-grid-cell-actioncolumn-1016   x-action-col-cell x-grid-cell-last"><div
										style="text-align: left;" class="x-grid-cell-inner ">
										<img data-qtip="Sell stock"
											class="x-action-col-icon x-action-col-0   "
											src="../shared/icons/fam/delete.gif" alt=""><img
											data-qtip="Buy stock"
											class="x-action-col-icon x-action-col-1   buy-col"
											src=""
											alt="">
									</div>
								</td>
							</tr>
							<tr class="x-grid-row ">
								<td
									class=" x-grid-cell x-grid-cell-gridcolumn-1011   x-grid-cell-first"><div
										style="text-align: left;" class="x-grid-cell-inner ">Altria
										Group Inc</div>
								</td>
								<td class=" x-grid-cell x-grid-cell-gridcolumn-1014   "><div
										style="text-align: left;" class="x-grid-cell-inner ">
										<span style="color: green;">0.34%</span>
									</div>
								</td>
								<td class=" x-grid-cell x-grid-cell-gridcolumn-1012   "><div
										style="text-align: left;" class="x-grid-cell-inner ">$83.81</div>
								</td>
								<td class=" x-grid-cell x-grid-cell-gridcolumn-1013   "><div
										style="text-align: left;" class="x-grid-cell-inner ">
										<span style="color: green;">0.28</span>
									</div>
								</td>
								<td class=" x-grid-cell x-grid-cell-gridcolumn-1015   "><div
										style="text-align: left;" class="x-grid-cell-inner ">09/01/2012</div>
								</td>
								<td
									class=" x-grid-cell x-grid-cell-actioncolumn-1016   x-action-col-cell x-grid-cell-last"><div
										style="text-align: left;" class="x-grid-cell-inner ">
										<img data-qtip="Sell stock"
											class="x-action-col-icon x-action-col-0   "
											src="../shared/icons/fam/delete.gif" alt=""><img
											data-qtip="Buy stock"
											class="x-action-col-icon x-action-col-1   buy-col"
											src=""
											alt="">
									</div>
								</td>
							</tr>
							<tr class="x-grid-row">
								<td
									class=" x-grid-cell x-grid-cell-gridcolumn-1011   x-grid-cell-first"><div
										style="text-align: left;" class="x-grid-cell-inner ">American
										Express Company</div>
								</td>
								<td class=" x-grid-cell x-grid-cell-gridcolumn-1014   "><div
										style="text-align: left;" class="x-grid-cell-inner ">
										<span style="color: green;">0.02%</span>
									</div>
								</td>
								<td class=" x-grid-cell x-grid-cell-gridcolumn-1012   "><div
										style="text-align: left;" class="x-grid-cell-inner ">$52.55</div>
								</td>
								<td class=" x-grid-cell x-grid-cell-gridcolumn-1013   "><div
										style="text-align: left;" class="x-grid-cell-inner ">
										<span style="color: green;">0.01</span>
									</div>
								</td>
								<td class=" x-grid-cell x-grid-cell-gridcolumn-1015   "><div
										style="text-align: left;" class="x-grid-cell-inner ">09/01/2012</div>
								</td>
								<td
									class=" x-grid-cell x-grid-cell-actioncolumn-1016   x-action-col-cell x-grid-cell-last"><div
										style="text-align: left;" class="x-grid-cell-inner ">
										<img data-qtip="Sell stock"
											class="x-action-col-icon x-action-col-0   "
											src="../shared/icons/fam/delete.gif" alt=""><img
											data-qtip="Buy stock"
											class="x-action-col-icon x-action-col-1   buy-col"
											src=""
											alt="">
									</div>
								</td>
							</tr>
							<tr class="x-grid-row ">
								<td
									class=" x-grid-cell x-grid-cell-gridcolumn-1011   x-grid-cell-first"><div
										style="text-align: left;" class="x-grid-cell-inner ">American
										International Group, Inc.</div>
								</td>
								<td class=" x-grid-cell x-grid-cell-gridcolumn-1014   "><div
										style="text-align: left;" class="x-grid-cell-inner ">
										<span style="color: green;">0.49%</span>
									</div>
								</td>
								<td class=" x-grid-cell x-grid-cell-gridcolumn-1012   "><div
										style="text-align: left;" class="x-grid-cell-inner ">$64.13</div>
								</td>
								<td class=" x-grid-cell x-grid-cell-gridcolumn-1013   "><div
										style="text-align: left;" class="x-grid-cell-inner ">
										<span style="color: green;">0.31</span>
									</div>
								</td>
								<td class=" x-grid-cell x-grid-cell-gridcolumn-1015   "><div
										style="text-align: left;" class="x-grid-cell-inner ">09/01/2012</div>
								</td>
								<td
									class=" x-grid-cell x-grid-cell-actioncolumn-1016   x-action-col-cell x-grid-cell-last"><div
										style="text-align: left;" class="x-grid-cell-inner ">
										<img data-qtip="Sell stock"
											class="x-action-col-icon x-action-col-0   "
											src="../shared/icons/fam/delete.gif" alt=""><img
											data-qtip="Buy stock"
											class="x-action-col-icon x-action-col-1   buy-col"
											src=""
											alt="">
									</div>
								</td>
							</tr>
							<tr class="x-grid-row  x-grid-row-alt">
								<td
									class=" x-grid-cell x-grid-cell-gridcolumn-1011   x-grid-cell-first"><div
										style="text-align: left;" class="x-grid-cell-inner ">AT&amp;T
										Inc.</div>
								</td>
								<td class=" x-grid-cell x-grid-cell-gridcolumn-1014   "><div
										style="text-align: left;" class="x-grid-cell-inner ">
										<span style="color: red;">-1.54%</span>
									</div>
								</td>
								<td class=" x-grid-cell x-grid-cell-gridcolumn-1012   "><div
										style="text-align: left;" class="x-grid-cell-inner ">$31.61</div>
								</td>
								<td class=" x-grid-cell x-grid-cell-gridcolumn-1013   "><div
										style="text-align: left;" class="x-grid-cell-inner ">
										<span style="color: red;">-0.48</span>
									</div>
								</td>
								<td class=" x-grid-cell x-grid-cell-gridcolumn-1015   "><div
										style="text-align: left;" class="x-grid-cell-inner ">09/01/2012</div>
								</td>
								<td
									class=" x-grid-cell x-grid-cell-actioncolumn-1016   x-action-col-cell x-grid-cell-last"><div
										style="text-align: left;" class="x-grid-cell-inner ">
										<img data-qtip="Sell stock"
											class="x-action-col-icon x-action-col-0   "
											src="../shared/icons/fam/delete.gif" alt=""><img
											data-qtip="Hold stock"
											class="x-action-col-icon x-action-col-1   alert-col"
											src=""
											alt="">
									</div>
								</td>
							</tr>
							<tr class="x-grid-row ">
								<td
									class=" x-grid-cell x-grid-cell-gridcolumn-1011   x-grid-cell-first"><div
										style="text-align: left;" class="x-grid-cell-inner ">Boeing
										Co.</div>
								</td>
								<td class=" x-grid-cell x-grid-cell-gridcolumn-1014   "><div
										style="text-align: left;" class="x-grid-cell-inner ">
										<span style="color: green;">0.71%</span>
									</div>
								</td>
								<td class=" x-grid-cell x-grid-cell-gridcolumn-1012   "><div
										style="text-align: left;" class="x-grid-cell-inner ">$75.43</div>
								</td>
								<td class=" x-grid-cell x-grid-cell-gridcolumn-1013   "><div
										style="text-align: left;" class="x-grid-cell-inner ">
										<span style="color: green;">0.53</span>
									</div>
								</td>
								<td class=" x-grid-cell x-grid-cell-gridcolumn-1015   "><div
										style="text-align: left;" class="x-grid-cell-inner ">09/01/2012</div>
								</td>
								<td
									class=" x-grid-cell x-grid-cell-actioncolumn-1016   x-action-col-cell x-grid-cell-last"><div
										style="text-align: left;" class="x-grid-cell-inner ">
										<img data-qtip="Sell stock"
											class="x-action-col-icon x-action-col-0   "
											src="../shared/icons/fam/delete.gif" alt=""><img
											data-qtip="Buy stock"
											class="x-action-col-icon x-action-col-1   buy-col"
											src=""
											alt="">
									</div>
								</td>
							</tr>
							<tr class="x-grid-row  x-grid-row-alt">
								<td
									class=" x-grid-cell x-grid-cell-gridcolumn-1011   x-grid-cell-first"><div
										style="text-align: left;" class="x-grid-cell-inner ">Caterpillar
										Inc.</div>
								</td>
								<td class=" x-grid-cell x-grid-cell-gridcolumn-1014   "><div
										style="text-align: left;" class="x-grid-cell-inner ">
										<span style="color: green;">1.39%</span>
									</div>
								</td>
								<td class=" x-grid-cell x-grid-cell-gridcolumn-1012   "><div
										style="text-align: left;" class="x-grid-cell-inner ">$67.27</div>
								</td>
								<td class=" x-grid-cell x-grid-cell-gridcolumn-1013   "><div
										style="text-align: left;" class="x-grid-cell-inner ">
										<span style="color: green;">0.92</span>
									</div>
								</td>
								<td class=" x-grid-cell x-grid-cell-gridcolumn-1015   "><div
										style="text-align: left;" class="x-grid-cell-inner ">09/01/2012</div>
								</td>
								<td
									class=" x-grid-cell x-grid-cell-actioncolumn-1016   x-action-col-cell x-grid-cell-last"><div
										style="text-align: left;" class="x-grid-cell-inner ">
										<img data-qtip="Sell stock"
											class="x-action-col-icon x-action-col-0   "
											src="../shared/icons/fam/delete.gif" alt=""><img
											data-qtip="Buy stock"
											class="x-action-col-icon x-action-col-1   buy-col"
											src=""
											alt="">
									</div>
								</td>
							</tr>
							<tr class="x-grid-row ">
								<td
									class=" x-grid-cell x-grid-cell-gridcolumn-1011   x-grid-cell-first"><div
										style="text-align: left;" class="x-grid-cell-inner ">Citigroup,
										Inc.</div>
								</td>
								<td class=" x-grid-cell x-grid-cell-gridcolumn-1014   "><div
										style="text-align: left;" class="x-grid-cell-inner ">
										<span style="color: green;">0.04%</span>
									</div>
								</td>
								<td class=" x-grid-cell x-grid-cell-gridcolumn-1012   "><div
										style="text-align: left;" class="x-grid-cell-inner ">$49.37</div>
								</td>
								<td class=" x-grid-cell x-grid-cell-gridcolumn-1013   "><div
										style="text-align: left;" class="x-grid-cell-inner ">
										<span style="color: green;">0.02</span>
									</div>
								</td>
								<td class=" x-grid-cell x-grid-cell-gridcolumn-1015   "><div
										style="text-align: left;" class="x-grid-cell-inner ">09/01/2012</div>
								</td>
								<td
									class=" x-grid-cell x-grid-cell-actioncolumn-1016   x-action-col-cell x-grid-cell-last"><div
										style="text-align: left;" class="x-grid-cell-inner ">
										<img data-qtip="Sell stock"
											class="x-action-col-icon x-action-col-0   "
											src="../shared/icons/fam/delete.gif" alt=""><img
											data-qtip="Buy stock"
											class="x-action-col-icon x-action-col-1   buy-col"
											src=""
											alt="">
									</div>
								</td>
							</tr>
							<tr class="x-grid-row  x-grid-row-alt">
								<td
									class=" x-grid-cell x-grid-cell-gridcolumn-1011   x-grid-cell-first"><div
										style="text-align: left;" class="x-grid-cell-inner ">E.I.
										du Pont de Nemours and Company</div>
								</td>
								<td class=" x-grid-cell x-grid-cell-gridcolumn-1014   "><div
										style="text-align: left;" class="x-grid-cell-inner ">
										<span style="color: green;">1.28%</span>
									</div>
								</td>
								<td class=" x-grid-cell x-grid-cell-gridcolumn-1012   "><div
										style="text-align: left;" class="x-grid-cell-inner ">$40.48</div>
								</td>
								<td class=" x-grid-cell x-grid-cell-gridcolumn-1013   "><div
										style="text-align: left;" class="x-grid-cell-inner ">
										<span style="color: green;">0.51</span>
									</div>
								</td>
								<td class=" x-grid-cell x-grid-cell-gridcolumn-1015   "><div
										style="text-align: left;" class="x-grid-cell-inner ">09/01/2012</div>
								</td>
								<td
									class=" x-grid-cell x-grid-cell-actioncolumn-1016   x-action-col-cell x-grid-cell-last"><div
										style="text-align: left;" class="x-grid-cell-inner ">
										<img data-qtip="Sell stock"
											class="x-action-col-icon x-action-col-0   "
											src="../shared/icons/fam/delete.gif" alt=""><img
											data-qtip="Buy stock"
											class="x-action-col-icon x-action-col-1   buy-col"
											src=""
											alt="">
									</div>
								</td>
							</tr>
							<tr class="x-grid-row ">
								<td
									class=" x-grid-cell x-grid-cell-gridcolumn-1011   x-grid-cell-first"><div
										style="text-align: left;" class="x-grid-cell-inner ">Exxon
										Mobil Corp</div>
								</td>
								<td class=" x-grid-cell x-grid-cell-gridcolumn-1014   "><div
										style="text-align: left;" class="x-grid-cell-inner ">
										<span style="color: red;">-0.64%</span>
									</div>
								</td>
								<td class=" x-grid-cell x-grid-cell-gridcolumn-1012   "><div
										style="text-align: left;" class="x-grid-cell-inner ">$68.10</div>
								</td>
								<td class=" x-grid-cell x-grid-cell-gridcolumn-1013   "><div
										style="text-align: left;" class="x-grid-cell-inner ">
										<span style="color: red;">-0.43</span>
									</div>
								</td>
								<td class=" x-grid-cell x-grid-cell-gridcolumn-1015   "><div
										style="text-align: left;" class="x-grid-cell-inner ">09/01/2012</div>
								</td>
								<td
									class=" x-grid-cell x-grid-cell-actioncolumn-1016   x-action-col-cell x-grid-cell-last"><div
										style="text-align: left;" class="x-grid-cell-inner ">
										<img data-qtip="Sell stock"
											class="x-action-col-icon x-action-col-0   "
											src="../shared/icons/fam/delete.gif" alt=""><img
											data-qtip="Hold stock"
											class="x-action-col-icon x-action-col-1   alert-col"
											src=""
											alt="">
									</div>
								</td>
							</tr>					
							<tr class="x-grid-row ">
								<td
									class=" x-grid-cell x-grid-cell-gridcolumn-1011   x-grid-cell-first"><div
										style="text-align: left;" class="x-grid-cell-inner ">Wal-Mart
										Stores, Inc.</div>
								</td>
								<td class=" x-grid-cell x-grid-cell-gridcolumn-1014   "><div
										style="text-align: left;" class="x-grid-cell-inner ">
										<span style="color: green;">1.63%</span>
									</div>
								</td>
								<td class=" x-grid-cell x-grid-cell-gridcolumn-1012   "><div
										style="text-align: left;" class="x-grid-cell-inner ">$45.45</div>
								</td>
								<td class=" x-grid-cell x-grid-cell-gridcolumn-1013   "><div
										style="text-align: left;" class="x-grid-cell-inner ">
										<span style="color: green;">0.73</span>
									</div>
								</td>
								<td class=" x-grid-cell x-grid-cell-gridcolumn-1015   "><div
										style="text-align: left;" class="x-grid-cell-inner ">09/01/2012</div>
								</td>
								<td
									class=" x-grid-cell x-grid-cell-actioncolumn-1016   x-action-col-cell x-grid-cell-last"><div
										style="text-align: left;" class="x-grid-cell-inner ">
										<img data-qtip="Sell stock"
											class="x-action-col-icon x-action-col-0   "
											src="../shared/icons/fam/delete.gif" alt=""><img
											data-qtip="Buy stock"
											class="x-action-col-icon x-action-col-1   buy-col"
											src=""
											alt="">
									</div>
								</td>
							</tr>
						</tbody>
					</table>
					<!-- 数据表格结束 -->
					
					
				</div>
			</div>
			
			
			

		<div id="mydatagrid_pagingtoolbar"
			class="x-toolbar x-docked x-toolbar-default x-docked-bottom x-toolbar-docked-bottom x-toolbar-default-docked-bottom x-box-layout-ct"
			style="width: 600px;left: 0px; top:330px; ">
			<div role="presentation" class="x-box-inner "
				id="pagingtoolbar-1009-innerCt" style="width: 696px; height: 22px;">
				<div
					style="position: absolute; width: 20000px; left: 0px; top: 0px; height: 1px"
					id="pagingtoolbar-1009-targetEl">
					<div id="pager_first_div"
						style="border-width: 1px; left: 0px; top: 0px; margin: 0px;"
						class="x-btn  x-box-item x-toolbar-item x-btn-default-toolbar-small 
							  x-icon x-btn-icon x-btn-default-toolbar-small-icon">
						<em id="button-1010-btnWrap">
							<button autocomplete="off"
								role="button" class="x-btn-center"
								type="button" data-qtip="First Page"
								style="height: 16px;" id="pager_first_btn">
								<span style="" class="x-btn-inner" id="button-1010-btnInnerEl">&nbsp;</span><span
								 class="x-btn-icon x-tbar-page-first"></span>
							</button>
						</em>
					</div>
					<div id="pager_prev_div"
						style="border-width: 1px; left: 24px; top: 0px; margin: 0px;"
						class="x-btn  x-box-item x-toolbar-item x-btn-default-toolbar-small 
							x-disabled  x-btn-default-toolbar-small-disabled x-icon x-btn-icon x-btn-default-toolbar-small-icon">
						<em id="button-1011-btnWrap"><button autocomplete="off"
								role="button"  class="x-btn-center"
								type="button"  data-qtip="Previous Page"
								style="height: 16px;" id="pager_prev_btn">
								<span style="" class="x-btn-inner" id="button-1011-btnInnerEl">&nbsp;</span><span
									class="x-btn-icon x-tbar-page-prev" ></span>
							</button>
						</em>
					</div>
					<div id="tbseparator-1012"
						style="border-width: 1px; left: 50px; top: 4px; margin: 0px;"
						class="x-toolbar-separator x-box-item x-toolbar-item x-toolbar-separator-horizontal"></div>
					<div id="tbtext-1013"
						class="x-toolbar-text x-box-item x-toolbar-item x-toolbar-text-default"
						style="left: 59px; top: 3px; margin: 0px;">Page</div>
					<table cellpadding="0" id="numberfield-1014"
						style="width: 30px; table-layout: fixed; left: 91px; top: 1px; margin: 0px;"
						class="x-field x-tbar-page-number x-form-item  x-box-item x-toolbar-item x-field-default-toolbar x-hbox-form-item">
						<tbody>
							<tr id="numberfield-1014-inputRow">
								<td width="105" valign="top" class="x-field-label-cell"
									halign="left" style="display: none;"
									id="numberfield-1014-labelCell"><label
									style="width: 100px; margin-right: 5px;"
									class="x-form-item-label x-form-item-label-left"
									for="numberfield-1014-inputEl" id="numberfield-1014-labelEl"></label>
								</td>
								<td role="presentation" colspan="3" id="numberfield-1014-bodyEl"
									class="x-form-item-body " style="width: 100%;"><table
										cellspacing="0" cellpadding="0"
										class="x-form-trigger-wrap x-unselectable"
										id="numberfield-1014-triggerWrap"
										style="-moz-user-select: -moz-none; width: 100%; table-layout: fixed;">
										<tbody>
											<tr>
												<td class="x-form-trigger-input-cell"
													id="numberfield-1014-inputCell" style="width: 100%;"><input
													type="text" autocomplete="off"
													class="x-form-field x-form-text "
													style="width: 100%; -moz-user-select: text;" disabled=""
													name="inputItem" size="1"
													id="ipt_pageNo" aria-invalid="false"
													data-errorqtip="">
												</td>
												<td style="width: 17px; display: none" id="ext-gen1067"><div
														role="button"
														class="x-trigger-index-0 x-form-trigger x-form-spinner-up x-unselectable"
														id="ext-gen1065" style="-moz-user-select: -moz-none;"></div>
													<div role="button"
														class="x-trigger-index-1 x-form-trigger x-form-spinner-down x-unselectable"
														id="ext-gen1066" style="-moz-user-select: -moz-none;"></div>
												</td>
											</tr>
										</tbody>
									</table>
								</td>
							</tr>
						</tbody>
					</table>
					<div id="pager_totalpage_text"
						class="x-toolbar-text x-box-item x-toolbar-item x-toolbar-text-default"
						style="left: 129px; top: 3px; margin: 0px;">of 0</div>
					<div id="tbseparator-1016"
						style="border-width: 1px; left: 156px; top: 4px; margin: 0px;"
						class="x-toolbar-separator x-box-item x-toolbar-item x-toolbar-separator-horizontal"></div>
					<div id="pager_next_div"
						style="border-width: 1px; left: 161px; top: 0px; margin: 0px;"
						class="x-btn  x-box-item x-toolbar-item x-btn-default-toolbar-small x-disabled  x-btn-default-toolbar-small-disabled x-icon x-btn-icon x-btn-default-toolbar-small-icon">
						<em id="button-1017-btnWrap"><button autocomplete="off"
								role="button"  class="x-btn-center"
								type="button"  data-qtip="Next Page"  id="pager_next_btn"
								style="height: 16px;">
								<span style="" class="x-btn-inner" id="button-1017-btnInnerEl">&nbsp;</span><span
									class="x-btn-icon x-tbar-page-next"></span>
							</button>
						</em>
					</div>
					<div id="pager_last_div"
						style="border-width: 1px; left: 185px; top: 0px; margin: 0px;"
						class="x-btn  x-box-item x-toolbar-item x-btn-default-toolbar-small x-disabled x-btn-default-toolbar-small-disabled x-icon x-btn-icon x-btn-default-toolbar-small-icon">
						<em id="button-1018-btnWrap"><button autocomplete="off"
								role="button"  class="x-btn-center"
								type="button" data-qtip="Last Page" id="pager_last_btn" 
								style="height: 16px;">
								<span style="" class="x-btn-inner" id="button-1018-btnInnerEl">&nbsp;</span><span
									class="x-btn-icon x-tbar-page-last" ></span>
							</button>
						</em>
					</div>
					<div id="tbseparator-1019"
						style="border-width: 1px; left: 211px; top: 4px; margin: 0px;"
						class="x-toolbar-separator x-box-item x-toolbar-item x-toolbar-separator-horizontal"></div>
					<div id="button-1020"
						style="border-width: 1px; left: 216px; top: 0px; margin: 0px;"
						class="x-btn x-box-item x-toolbar-item x-btn-default-toolbar-small x-icon x-btn-icon x-btn-default-toolbar-small-icon">
						<em id="button-1020-btnWrap"><button autocomplete="off"
								role="button" hidefocus="true" class="x-btn-center"
								type="button" id="pager_refresh_btn" data-qtip="Refresh"
								style="height: 16px;">
								<span style="" class="x-btn-inner" id="button-1020-btnInnerEl">&nbsp;</span><span
									class="x-btn-icon x-tbar-loading" id="button-1020-btnIconEl"></span>
							</button>
						</em>
					</div>
					<div id="tbseparator-1021"
						style="border-width: 1px; left: 242px; top: 4px; margin: 0px;"
						class="x-toolbar-separator x-box-item x-toolbar-item x-toolbar-separator-horizontal"></div>					
					<div id="tbfill-1023"
						style="height: 0px; left: 330px; top: 11px; margin: 0px; width: 261px;"
						class="x-component x-box-item x-toolbar-item x-component-default"></div>
					<div id="tbtext-1024"
						class="x-toolbar-text x-box-item x-toolbar-item x-toolbar-text-default"
						style="left: 597px; top: 3px; margin: 0px;">No topics to
						display</div>
				</div>
			</div>
		</div>
		
		

	</div>

	

	<div role="presentation" class="x-css-shadow" id="mydatagrid_popmenu_shade"
		style="z-index: 19000; left: 645px; top: 251px; width: 126px; height: 170px; box-shadow: 0px 0px 4px rgb(136, 136, 136); display: none;"></div>
	<div id="mydatagrid_popmenu" class="x-panel x-layer x-panel-default x-menu"
		style="height: 174px; left: 645px; top: 247px; z-index: 19011; width: 126px; display:none;"
		tabindex="-1">
		<div
			class="x-panel-body x-menu-body x-panel-body-default x-panel-body-default x-box-layout-ct"
			id="menu-1031-body"
			style="left: 0px; top: 0px; width: 126px; height: 174px;">
			<div class="x-box-inner x-box-scroller-top">
				<div style="display: none" class="x-box-scroller x-menu-scroll-top"
					id="menu-1031-before-scroller"></div>
			</div>
			<div role="presentation"
				class="x-box-inner x-vertical-box-overflow-body"
				id="menu-1031-innerCt" style="height: 172px; width: 120px;">
				<div class="x-menu-icon-separator" id="ext-gen1074"
					style="height: 172px;">&nbsp;</div>
				<div
					style="position: absolute; width: 20000px; left: 0px; top: 0px; height: 1px"
					id="menu-1031-targetEl">
					<div id="menucheckitem-1020"
						class="x-component x-box-item x-component-default x-menu-item x-menu-item-checked"
						style="left: 0px; top: 0px; margin: 0px; width: 120px;">
						<a unselectable="on" hidefocus="true" href="#"
							class="x-menu-item-link" id="menucheckitem-1020-itemEl"><img
							class="x-menu-item-icon undefined"
							src=""
							id="menucheckitem-1020-iconEl"><span
							class="x-menu-item-text" id="company">Company</span><img
							class=""
							src=""
							id="menucheckitem-1020-arrowEl">
						</a>
					</div>
					<div id="menucheckitem-1021"
						class="x-component x-box-item x-component-default x-menu-item x-menu-item-checked"
						style="left: 0px; top: 28px; margin: 0px; width: 120px;">
						<a unselectable="on" hidefocus="true" href="#"
							class="x-menu-item-link" id="menucheckitem-1021-itemEl"><img
							class="x-menu-item-icon undefined"
							src=""
							id="menucheckitem-1021-iconEl"><span
							class="x-menu-item-text" id="Change">%
								Change</span><img class=""
							src=""
							id="menucheckitem-1021-arrowEl">
						</a>
					</div>
					<div id="menucheckitem-1022"
						class="x-component x-box-item x-component-default x-menu-item x-menu-item-checked"
						style="left: 0px; top: 56px; margin: 0px; width: 120px;">
						<a unselectable="on" hidefocus="true" href="#"
							class="x-menu-item-link" id="menucheckitem-1022-itemEl"><img
							class="x-menu-item-icon undefined"
							src=""
							id="menucheckitem-1022-iconEl"><span
							class="x-menu-item-text" id="Price">Price</span><img
							class=""
							src=""
							id="menucheckitem-1022-arrowEl">
						</a>
					</div>
					<div id="menucheckitem-1023"
						class="x-component x-box-item x-component-default x-menu-item x-menu-item-checked"
						style="left: 0px; top: 84px; margin: 0px; width: 120px;">
						<a unselectable="on" hidefocus="true" href="#"
							class="x-menu-item-link" id="menucheckitem-1023-itemEl"><img
							class="x-menu-item-icon undefined"
							src=""
							id="menucheckitem-1023-iconEl"><span
							class="x-menu-item-text" id="Unit">Change</span><img
							class=""
							src=""
							id="menucheckitem-1023-arrowEl">
						</a>
					</div>
					<div id="menucheckitem-1024"
						class="x-component x-box-item x-component-default x-menu-item x-menu-item-checked"
						style="left: 0px; top: 112px; margin: 0px; width: 120px;">
						<a unselectable="on" hidefocus="true" href="#"
							class="x-menu-item-link" id="menucheckitem-1024-itemEl"><img
							class="x-menu-item-icon undefined"
							src=""
							id="menucheckitem-1024-iconEl"><span
							class="x-menu-item-text" id="Updated">Last
								Updated</span><img class=""
							src=""
							id="menucheckitem-1024-arrowEl">
						</a>
					</div>
					<div id="menucheckitem-1025"
						class="x-component x-box-item x-component-default x-menu-item x-menu-item-checked"
						style="left: 0px; top: 140px; margin: 0px; width: 120px;">
						<a unselectable="on" hidefocus="true" href="#"
							class="x-menu-item-link" id="menucheckitem-1025-itemEl"><img
							class="x-menu-item-icon undefined"
							src=""
							id="menucheckitem-1025-iconEl"><span
							class="x-menu-item-text" id="menucheckitem-1025-textEl"><i>Actions</i>
						</span><img class=""
							src=""
							id="menucheckitem-1025-arrowEl">
						</a>
					</div>
				</div>
			</div>
			<div class="x-box-inner x-box-scroller-bottom">
				<div style="display: none"
					class="x-box-scroller x-menu-scroll-bottom"
					id="menu-1031-after-scroller"></div>
			</div>
		</div>
	</div>
	

	

	
<!-- 
	<div role="presentation" class="x-css-shadow" id="ext-gen1073"
		style="z-index: 19000; left: 437px; top: 251px; width: 126px; height: 92px; box-shadow: 0px 0px 4px rgb(136, 136, 136); display: block;"></div>
	<div id="menu-1026" class="x-panel x-layer x-panel-default x-menu"
		style="width: 126px; height: 96px; left: 287px; top: 129px; z-index: 19001;"
		tabindex="-1">
		<div
			class="x-panel-body x-menu-body x-panel-body-default x-panel-body-default x-box-layout-ct"
			id="menu-1026-body"
			style="width: 126px; height: 96px; left: 0px; top: 0px;">
			<div class="x-box-inner x-box-scroller-top">
				<div style="display: none" class="x-box-scroller x-menu-scroll-top"
					id="menu-1026-before-scroller"></div>
			</div>
			<div role="presentation"
				class="x-box-inner x-vertical-box-overflow-body"
				id="menu-1026-innerCt" style="height: 94px; width: 120px;">
				<div class="x-menu-icon-separator" id="ext-gen1072"
					style="height: 94px;">&nbsp;</div>
				<div
					style="position: absolute; width: 20000px; left: 0px; top: 0px; height: 1px"
					id="menu-1026-targetEl">
					<div id="menuitem-1027"
						class="x-component x-hmenu-sort-asc x-box-item x-component-default x-menu-item"
						style="left: 0px; top: 0px; margin: 0px; width: 120px;">
						<a unselectable="on" hidefocus="true" href="#"
							class="x-menu-item-link" id="menuitem-1027-itemEl"><img
							class="x-menu-item-icon undefined"
							src=""
							id="menuitem-1027-iconEl"><span class="x-menu-item-text"
							id="menuitem-1027-textEl">Sort Ascending</span><img class=""
							src=""
							id="menuitem-1027-arrowEl">
						</a>
					</div>
					<div id="menuitem-1028"
						class="x-component x-hmenu-sort-desc x-box-item x-component-default x-menu-item"
						style="left: 0px; top: 28px; margin: 0px; width: 120px;">
						<a unselectable="on" hidefocus="true" href="#"
							class="x-menu-item-link" id="menuitem-1028-itemEl"><img
							class="x-menu-item-icon undefined"
							src=""
							id="menuitem-1028-iconEl"><span class="x-menu-item-text"
							id="menuitem-1028-textEl">Sort Descending</span><img class=""
							src=""
							id="menuitem-1028-arrowEl">
						</a>
					</div>
					<div id="menuseparator-1029"
						class="x-component x-box-item x-component-default x-menu-item-separator x-menu-item x-menu-item-plain"
						style="left: 0px; top: 58px; margin: 0px; width: 120px;">&nbsp;</div>
					<div id="menuitem-1030"
						class="x-component x-cols-icon x-box-item x-component-default x-menu-item"
						style="left: 0px; top: 62px; margin: 0px; width: 120px;">
						<a unselectable="on" hidefocus="true" href="#"
							class="x-menu-item-link" id="menuitem-1030-itemEl"><img
							class="x-menu-item-icon undefined"
							src=""
							id="menuitem-1030-iconEl"><span style="margin-right: 17px;"
							class="x-menu-item-text" id="menuitem-1030-textEl">Columns</span><img
							class="x-menu-item-arrow"
							src=""
							id="menuitem-1030-arrowEl">
						</a>
					</div>
				</div>
			</div>			
			
			<div class="x-box-inner x-box-scroller-bottom">
				<div style="display: none"
					class="x-box-scroller x-menu-scroll-bottom"
					id="menu-1026-after-scroller"></div>
			</div>
		</div>
	</div>
 -->	

	

	
	







</body>
</html>